---
metaTitle: Password Toggle Field
metaDescription: A password input field with an integrated button to toggle the value's visibility
name: password-toggle-field
---

# Password Toggle Field

<Description>
	A password input field with an integrated button to toggle the value's
	visibility.
</Description>

<HeroContainer>
	<PasswordToggleFieldDemo />
</HeroContainer>

<HeroCodeBlock folder="PasswordToggleField" />

<Highlights
	features={[
		"Returns focus to the input when toggling with a pointer",
		"Maintains button focus when toggling with keyboard or virtual navigation",
		"Resets visibility to hidden after form submission to prevent accidental storage",
		"Implicit accessible labeling for icon-based toggle buttons",
	]}
/>

## Anatomy

Import all parts and piece them together.

```jsx
import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";
import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";

export default () => (
	<PasswordToggleField.Root>
		<PasswordToggleField.Input />
		<PasswordToggleField.Toggle>
			<PasswordToggleField.Icon
				visible={<EyeOpenIcon />}
				hidden={<EyeClosedIcon />}
			/>
		</PasswordToggleField.Toggle>
	</PasswordToggleField.Root>
);
```

## API Reference

### Root

Contains all the parts of a password toggle field.

<PropsTable
	data={[
		{
			name: "id",
			required: false,
			type: "string",
			description: (
				<span>
					The ID of the field. This ID is used as a basis for nested DOM element
					IDs used for accessibility attributes.
				</span>
			),
		},
		{
			name: "visible",
			required: false,
			type: "boolean",
			description: (
				<span>
					The controlled visibility state of the field. Must be used in
					conjunction with <Code>onVisiblityChange</Code>.
				</span>
			),
		},
		{
			name: "defaultVisible",
			required: false,
			type: "boolean",
			description: (
				<span>
					The visibility state of the field when initially rendered. Use when
					you do not need to control the visibility state.
				</span>
			),
		},
		{
			name: "onVisiblityChange",
			required: false,
			type: "(visible: boolean) => void",
			typeSimple: "function",
			description: (
				<span>
					Event handler called when the field's visibility state changes.
				</span>
			),
		},
	]}
/>

### Input

Renders a the input containing the password value.

<PropsTable
	data={[
		{
			name: "asChild",
			required: false,
			type: "boolean",
			default: "false",
			description: (
				<>
					Change the default rendered element for the one passed as a child,
					merging their props and behavior.
					<br />
					<br />
					Read our <a href="../guides/composition">Composition</a> guide for
					more details.
				</>
			),
		},
		{
			name: "autoComplete",
			required: false,
			type: '"current-password" | "new-password" | "off"',
			typeSimple: "enum",
			default: '"current-password"',
			description: (
				<span>
					Specifies what—if any—permission the user agent has to provide
					automated assistance in filling out form field values, as well as
					guidance to the browser as to the type of information expected in the
					field.
				</span>
			),
		},
	]}
/>

### Toggle

<PropsTable
	data={[
		{
			name: "asChild",
			required: false,
			type: "boolean",
			default: "false",
			description: (
				<>
					Change the default rendered element for the one passed as a child,
					merging their props and behavior.
					<br />
					<br />
					Read our <a href="../guides/composition">Composition</a> guide for
					more details.
				</>
			),
		},
	]}
/>

### Slot

<PropsTable
	data={[
		{
			name: "render",
			required: false,
			type: "(props: { visible: boolean }) => void",
			typeSimple: "function",
			description: (
				<span>
					A function that returns a React node to render. Can be used for more
					control over rendering.
				</span>
			),
		},
		{
			name: "visible",
			required: false,
			type: "boolean",
			description: (
				<span>
					The React node to render when the field's visibility state is visible.
				</span>
			),
		},
		{
			name: "hidden",
			required: false,
			type: "boolean",
			description: (
				<span>
					The React node to render when the field's visibility state is hidden.
				</span>
			),
		},
	]}
/>

### Icon

<PropsTable
	data={[
		{
			name: "asChild",
			required: false,
			type: "boolean",
			default: "false",
			description: (
				<>
					Change the default rendered element for the one passed as a child,
					merging their props and behavior.
					<br />
					<br />
					Read our <a href="../guides/composition">Composition</a> guide for
					more details.
				</>
			),
		},
		{
			name: "visible",
			required: true,
			type: "boolean",
			description: (
				<span>
					The SVG icon to render when the field's visibility state is visible.
				</span>
			),
		},
		{
			name: "hidden",
			required: true,
			type: "boolean",
			description: (
				<span>
					The SVG icon to render when the field's visibility state is hidden.
				</span>
			),
		},
	]}
/>

## Examples

### Basic usage

```jsx
<PasswordToggleField.Root>
	<PasswordToggleField.Input />
	<PasswordToggleField.Toggle>
		<PasswordToggleField.Icon
			visible={<EyeOpenIcon />}
			hidden={<EyeClosedIcon />}
		/>
	</PasswordToggleField.Toggle>
</PasswordToggleField.Root>
```

### With `Slot`

```jsx
<PasswordToggleField.Root>
	<PasswordToggleField.Input />
	<PasswordToggleField.Toggle>
		<PasswordToggleField.Slot visible="🙊" hidden="🙈" />
	</PasswordToggleField.Toggle>
</PasswordToggleField.Root>
```

### With `Slot` + `render` prop

```jsx
<PasswordToggleField.Root>
	<PasswordToggleField.Input />
	<PasswordToggleField.Toggle>
		<PasswordToggleField.Slot
			render={({ visible }) => (
				<svg aria-hidden viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg">
					<path d={visible ? "M1 1 L2 2" : "M2 1 L1 2"} />
				</svg>
			)}
		/>
	</PasswordToggleField.Toggle>
</PasswordToggleField.Root>
```
